<template>
	<view class="container" :style="{background: `linear-gradient(to bottom, ${_temp_themeColor}, ${lightColor})`}" >
		<loading :show="loading_show"></loading>
		<customHead
			title="检疫证明"
			isShowBackArrow
			:titlePaddingLeft="30"
			:placeholder="true"
		>
		</customHead>
		<view class="main" v-if="naviHeight">
			<view class="title" id="title">
				<view class="headline">
					<text>{{notice.title}}</text>
				</view>
				<view class="desc">
					<text>{{notice.extJson}}</text>
				</view>
			</view>
			<view class="content" :style="{height: `${contentHeight}px`}">
				<view class="content_box">
					<scroll-view class="scroll" scroll-y="true">
						<view class="" style="font-size: 26rpx;color: #333;margin-top: 20rpx;">
							<u-parse :content="notice.content"></u-parse>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {searchPlugsNoticeList} from '@/tools/request/api.js'
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	export default {
		data() {
			return {
				notice: {},
				contentHeight: 0,
				loading_show: false
			};
		},
		onLoad () {
			this.getNoticeList()
		},
		onShow () {
			
		},
		computed: {
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.1);
				return light_color;
			},
		},
		methods: {
			// 获取通知信息
			getNoticeList () {
				let data = {
					page: 1,
					size: 100,
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				this.loading_show = true;
				searchPlugsNoticeList(data).then((res) => {
					this.loading_show = false;
					if (res.code != 200) return uni.$showMsg();
					let list = res.body.list;
					let str = list.filter(item => item.type == 'jianyi');
					this.notice = str[0];
					this.$nextTick(() => {
						this.getHeight();
					})
				})
			},
			getHeight () {
				let screenHeight = wx.getSystemInfoSync().screenHeight;
				let titleInfo = uni.createSelectorQuery().in(this);
				titleInfo.select("#title").boundingClientRect((titleRes)=>{
					this.contentHeight = screenHeight - this.naviHeight - titleRes.height;
				}).exec()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		
		.main{
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			box-sizing: border-box;
			
			.title{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 60rpx;
				
				.headline{
					padding: 20rpx 0;
					font-size: 70rpx;
					font-weight: bold;
					color: #fff;
				}
				.desc{
					font-size: 30rpx;
					color: #fff;
				}
			}
			.content{
				width: 100%;
				padding-bottom: 40rpx;
				box-sizing: border-box;
				
				.content_box{
					width: 100%;
					height: 100%;
					background-color: #fff;
					border-radius: 30rpx;
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					
					.scroll{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
